<template>
	<div class="global-modal">
		<Render
			v-for="(item, idx) in items"
			:key="idx"
			v-bind="vBind(item.state)"
			:params="item.state.props"
			:close="item.close"
			:ok="item.ok"
			:component="item.state.component"
			:title="item.state.title"
			:height="item.state.height"
			:width="item.state.width"
			:position="item.state.position"
			:lock="item.state.lock"
			:countdown="item.state.countdown"
			:mask="item.state.mask"
			:closing="item.state.closing"
			:state="item.state"
			:enableLock="item.state.enableLock"
			:xClosable="item.state.xClosable"
			:escClosable="item.state.escClosable"
			:maskClosable="item.state.maskClosable"
			@update:modelValue="item.state.modelValue = $event"
			@update:lock="item.state.lock = $event"
		/>
	</div>
</template>

<script setup>
import { omit } from 'lodash-es'
import Render from './render.vue'

defineOptions({ name: 'ModalRender' })

const excludes = [
	'ok',
	'state',
	'closing',
	'countdown',
	'beforeClose',
	'position',
	'lock',
	'title',
	'enableLock',
	'props',
	'close',
	'onClose',
	'component',
	'mask',
	'height',
	'width',
	'xClosable',
	'escClosable',
	'maskClosable',
]
const vBind = state => omit(state, excludes)
defineProps({
	items: { type: Array, required: true },
})
</script>
